.world_details {
  display: flex;
  flex-direction: column;
  
  width: 100%;
  height: 100vh;

  padding: 112px 48px 20px 48px;

  .world_info {
    display: flex;
    flex-direction: column;
    
    width: 100%;

    .world_name {
      width: 100%;
      height: 48px;
      padding: 10px 0;

      font-family: 'Arial';
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 28px;
      /* identical to box height */
  
  
      color: #FFFFFF;
  
  
      /* Inside auto layout */
  
      flex: none;
      order: 0;
      flex-grow: 0;
    }
  
    .world_desc {
      width: 100%;
      height: 128px;
  
      font-family: 'Arial';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 200%;
      /* or 32px */
  
  
      color: #FFFFFF;
  
  
      /* Inside auto layout */
  
      flex: none;
      order: 1;
      flex-grow: 0;
    }
  }
  
  .agent_info {
    display: flex;
    flex-direction: column;
    
    width: 100%;
    height: calc(100% - 40px);

    overflow-y: auto;
    scrollbar-width: thin;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #479757; 
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: #FFFB92; 
    }

    .basic_info {
      display: flex;
      flex-direction: column;
      
      width: 100%;

      .agent_title {
        width: 100%;
        height: 48px;
        padding: 10px 0;

        font-family: 'Arial';
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        /* identical to box height */
    
    
        color: #FFFFFF;
    
    
        /* Inside auto layout */
    
        flex: none;
        order: 0;
        flex-grow: 0;
      }
  
      .agent_item {
        width: 100%;
  
        font-family: 'Arial';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 200%;
        /* or 32px */
    
    
        color: #FFFFFF;
  
        /* Inside auto layout */
    
        flex: none;
        order: 1;
        flex-grow: 0;
      }
    }

    .chat_info {
      display: flex;
      flex-direction: column;
      
      width: 100%;

      .chat_title {
        width: 100%;
        height: 48px;
        padding: 10px 0;

        font-family: 'Arial';
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        /* identical to box height */
    
    
        color: #FFFFFF;
    
    
        /* Inside auto layout */
    
        flex: none;
        order: 0;
        flex-grow: 0;
      }
  
      .chat_box {
        display: flex;
        flex-direction: column;
        
        width: 352px;
        overflow: hidden;

        font-family: 'Arial';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 200%;
        /* or 32px */

        .chat_item {
          width: 100%;
    
          font-family: 'Arial';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 200%;
          /* or 32px */
      
      
          color: #FFFFFF;
    
          /* Inside auto layout */
      
          flex: none;
          order: 1;
          flex-grow: 0;
        }
      }
      
    }
    
  }
}